﻿<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0,viewport-fit=cover">
    <title>选项卡</title>
    <link href="css/weui/dist/style/weui.css" rel="stylesheet" />
    <link href="viewerjs/viewer.min.css" rel="stylesheet" />
    <style>
        body, html {
            width: 100%;
        }

        .weui-navbar {
            width: 25%;
            min-height: 100%;
            display: block;
            float: left;
            background: #EDEDED;
        }

        .weui-navbar__item.weui-bar__item_on {
            background-color: #FFF;
        }

        .weui-navbar + .weui-tab__panel {
            padding-top: 0px;
            padding-bottom: 0;
        }

        .weui-tab__panel {
            width: 70%;
            min-height: 100%;
            float: left;
            background-color: #FFF;
        }

        .weui-grid__icon {
            width: 45px;
            height: 45px;
            margin: 0 auto;
        }

        .weui-navbar__item:after {
            border: none;
            color: #FFF;
        }
    </style>
</head>
<body>
    <div class="page">
        <div class="page__bd" style="height: 100%;">
            <div class="weui-search-bar weui-search-bar_focusing" id="searchBar">
                <form class="weui-search-bar__form">
                    <div class="weui-search-bar__box">
                        <i class="weui-icon-search"></i>
                        <input type="search" class="weui-search-bar__input" id="searchInput_item" placeholder="搜索" required="">
                        <a href="javascript:" class="weui-icon-clear" id="searchClear"></a>
                    </div>
                    <label class="weui-search-bar__label" id="searchText" style="transform-origin: 0px 0px 0px; opacity: 1; transform: scale(1, 1);">
                        <i class="weui-icon-search"></i>
                        <span>搜索</span>
                    </label>
                </form>
                <a href="javascript:" class="weui-search-bar__cancel-btn" onclick="searchItemForName()">搜索</a>
            </div>
            <div class="weui-tab">
                <div class="weui-navbar">
                    <div class="weui-navbar__item weui-bar__item_on" data-value="1">
                        全部
                    </div>
                    <div class="weui-navbar__item" data-value="0">
                        电器
                    </div>
                    <div class="weui-navbar__item" data-value="0">
                        水暖
                    </div>
                    <div class="weui-navbar__item" data-value="0">
                        门锁
                    </div>
                    <div class="weui-navbar__item" data-value="0">
                        房屋结构
                    </div>
                    <div class="weui-navbar__item" data-value="0">
                        家具
                    </div>
                </div>
                <div class="weui-tab__panel">
                    <div class="weui-grids">
                        <a href="javascript:;" class="weui-grid">
                            <div class="weui-grid__icon">
                                <img src="http://pic.90sjimg.com/design/01/40/91/47/59396e209bb08.png" alt=" ">
                            </div>
                            <p class="weui-grid__label">浴霸</p>
                            <p class="weui-grid__label" style="font-size:11px;color:red;">￥100</p>
                        </a>
                        <a href="javascript:;" class="weui-grid">
                            <div class="weui-grid__icon">
                                <img src="http://pic.90sjimg.com/design/01/40/91/47/59396e209bb08.png" alt=" ">
                            </div>
                            <p class="weui-grid__label">排风扇</p>
                            <p class="weui-grid__label" style="font-size:11px;color:red;">￥100</p>
                        </a>
                        <a href="javascript:;" class="weui-grid">
                            <div class="weui-grid__icon">
                                <img src="http://pic.90sjimg.com/design/01/40/91/47/59396e209bb08.png" alt=" ">
                            </div>
                            <p class="weui-grid__label">开关</p>
                            <p class="weui-grid__label" style="font-size:11px;color:red;">￥100</p>
                        </a>
                        <a href="javascript:;" class="weui-grid">
                            <div class="weui-grid__icon">
                                <img src="http://pic.90sjimg.com/design/01/40/91/47/59396e209bb08.png" alt=" ">
                            </div>
                            <p class="weui-grid__label">电闸</p>
                            <p class="weui-grid__label" style="font-size:11px;color:red;">￥100</p>
                        </a>
                        <a href="javascript:;" class="weui-grid">
                            <div class="weui-grid__icon">
                                <img src="http://pic.90sjimg.com/design/01/40/91/47/59396e209bb08.png" alt=" ">
                            </div>
                            <p class="weui-grid__label">电线</p>
                            <p class="weui-grid__label" style="font-size:11px;color:red;">￥100</p>
                        </a>
                        <a href="javascript:;" class="weui-grid">
                            <div class="weui-grid__icon">
                                <img src="http://pic.90sjimg.com/design/01/40/91/47/59396e209bb08.png" alt=" ">
                            </div>
                            <p class="weui-grid__label">灯具</p>
                            <p class="weui-grid__label" style="font-size:11px;color:red;">￥100</p>
                        </a>
                        <a href="javascript:;" class="weui-grid">
                            <div class="weui-grid__icon">
                                <img src="http://pic.90sjimg.com/design/01/40/91/47/59396e209bb08.png" alt=" ">
                            </div>
                            <p class="weui-grid__label">插座</p>
                            <p class="weui-grid__label" style="font-size:11px;color:red;">￥100</p>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script type="text/javascript" src="https://cdn.bootcss.com/jquery/1.12.1/jquery.min.js"></script>
    <script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
    <script type="text/javascript" src="https://res.wx.qq.com/open/libs/weuijs/1.2.1/weui.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $('.weui-navbar__item').on('click', function () {
                $(this).addClass('weui-bar__item_on').siblings('.weui-bar__item_on').removeClass('weui-bar__item_on');
            });
        });
    </script>
</body>
</html>
